<template>
	<div class="content">
		<div class='tips' @click="show=true">
			<img src="@/assets/img/index/notice.png" alt="">点击查看就诊人须知
		</div>
		<div class='info'>
			<van-cell-group :border='false'> 
				<van-field required v-model="form.pat_name" label="真实姓名" placeholder="请输入真实姓名" />
				<!-- @click="openPicker(0)" -->
				<van-field @click="openPicker(0)" required readonly is-link v-model="cardTypeName" label="证件类型" placeholder="请选择证件类型" />
				<van-field required v-model="form.idno" label="证件号码" placeholder="请输入真实证件号码" />
				<!-- <van-field required readonly is-link v-model="familial" label="民族" placeholder="请选择民族"
					@click="openPicker(1)" />
				<van-field required readonly is-link v-model="sexName" label="性别" placeholder="请选择性别"
					@click="openPicker(2)" />
				<van-field required readonly is-link v-model="form.pat_brsdate" label="生日" placeholder="请选择生日"
					@click="timeshow=true" /> -->

				<van-field required v-model="form.phno" label="手机号" placeholder="请输入手机号" />
				<!-- <van-field required center clearable v-model="form.verify_code" label="验证码" placeholder="验证码">
					<div class="info-code" slot="button">获取验证码</div>
				</van-field> -->
				<van-field required readonly is-link v-model="address" label="所在地区" placeholder="请选择常住地址" 
				@click="areaPicker=true" />
				<van-field required v-model="addressInfo" label="详细地址" placeholder="请输入详细地址（到门牌号）" />
				<van-cell required title="是否本人">
					<van-switch @change='change' active-color="#26D54B" slot="right-icon" size="20px" v-model="is_self" />
				</van-cell>
			</van-cell-group>
		</div>
		<div class="addBtn flex3" @click="submitEvent()">确定</div>
		<van-popup v-model="show" round overlay-class='alterPou'>
			<div class='alterTips'>
				<div class="alterTips-t">就诊人须知</div>
				<div class="alterTips-info">
					一、填写的姓名、身份证号将用于院内就医过程登记，请确认信息真实准确。<br>
					二、手机号将用于电话（短信）通知，请认真填写。
				</div>
				<div class="alterTips-btn" @click="show=false">已知晓</div>
			</div>
		</van-popup>
		<van-popup v-model="timeshow" round position="bottom">
			<van-datetime-picker v-model="currentDate" :max-date="maxDate" :min-date="minDate" type="date"
				@confirm='confirmTime' />
		</van-popup>

		<van-popup v-model:show="showPicker" round position="bottom">
			<van-picker :show-toolbar='true' value-key='name' :columns="columns" @cancel="showPicker = false"
				@confirm="onConfirm" />
		</van-popup>
		
		<van-popup v-model:show="areaPicker" round position="bottom">
			<van-area :area-list="areaList" @confirm='areaconfirm'/>
		</van-popup>
		<back-img></back-img>
	</div>
</template>

<script>
	import { Toast } from 'vant'
	import { areaList } from '@vant/area-data';
	export default {
		data() {
			return {
				areaList:[],
				areaPicker:false,
				currentDate: new Date(),
				maxDate: new Date(),
				minDate: new Date(1930, 11, 1),
				timeshow: false,
				show: false,
				form:{
					"pat_name": "", //名称	 
					"id_type": '', //证件类型
					"idno": "", //身份证号码
					"pat_sex": "", //性别
					"pat_brsdate": "", //生日：2010-01-01
					"nation": "", //民族
					"pat_hous_addr": "", //家庭住址
					"is_self":0, //是否本人  （设为默认就诊人）
					"phno": "", //电话
					"verify_code": "1" //验证吗 
				},
				is_self:false,
				cardTypeName:'居民身份证',
				familial: '',
				sexName: '',
				address: '',
				addressInfo: '',

				cardTypeList: [],
				FamilialList: [],
				sexList: [],
				showPickerType: 0, //0--证件，1--名族
				showPicker: false,
				columns: []
			};
		},
		created() {
			this.getCardType()
			this.getFamilial()
			this.getSex()
			this.areaList=areaList
		},
		components: {

		},
		methods: {
			submitEvent(){
				let that=this
				if(!that.form.pat_name){
					return this.$toast('请输入真实姓名！');
				}
				if(!that.form.id_type){
					return this.$toast('请选择证件类型！');
				}
				if(!that.form.idno){
					return this.$toast('请输入证件号！');
				}
				// if(!that.form.pat_sex){
				// 	return this.$toast('请选择性别！');
				// }
				// if(!that.form.pat_brsdate){
				// 	return this.$toast('请选择生日！');
				// }
				if(!that.form.phno){
					return this.$toast('请输入手机号！');
				}
				if(!/^1[3-9]\d{9}$/.test(that.form.phno)) {
					return this.$toast('请填写正确的手机号！');
				}
				// if(!that.form.verify_code){
				// 	return this.$toast('请输入验证码！');
				// }
				// if(!that.form.nation){
				// 	return this.$toast('请选择民族！');
				// }
				if(!that.address){
					return this.$toast('请选择地址！');
				}
				if(!that.addressInfo){
					return this.$toast('请输入详细地址！');
				}
				Toast.loading({
				   message: '提交中...',
				   forbidClick: true
				});
				let url = "/api/pat/add";
				that.form.is_self=that.is_self==true?1:0
				that.form.pat_hous_addr=that.address+that.addressInfo
				that.$axios.post(url,that.form).then(res => {
					console.log(res,"res")
					if(res.ack_info.exe_status=='E'){
						Toast.clear();
						that.$toast(res.ack_info.err_msg+'!')
					}else{
						Toast.clear();
						that.$toast('添加成功！');
						// replace: true
						setTimeout(()=>{
							that.$router.replace("/visitorCard")
						},1000)
					}
				}).catch(err => {
					console.log(err)
				});
			},
			areaconfirm(e){
				this.areaPicker=false
				this.address=e[0].name+e[1].name+e[2].name
			},
			confirmTime(e) {
				this.timeshow = false;
				var date = this.currentDate;
				var seperator1 = "-";
				var seperator2 = ":";
				var month = date.getMonth() + 1;
				var strDate = date.getDate();
				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				this.currentDate =date.getFullYear() +seperator1 +month +seperator1 +strDate;
                this.form.pat_brsdate = this.currentDate;
			},
			openPicker(type) {
				this.showPickerType = type
				this.columns = type == 0 ? this.cardTypeList : type == 1 ? this.FamilialList : this.sexList
				this.showPicker = true
			},
			onConfirm(e) {
				this.showPicker = false
				if (this.showPickerType == 0) {
					this.cardTypeName = e.name
					this.form.id_type = e.code
				} else if (this.showPickerType == 1) {
					this.familial = e.name
					this.form.nation = e.code
				} else if (this.showPickerType == 2) {
					this.sexName = e.name
					this.form.pat_sex = e.code
				}
			},
			//证件类型
			getCardType() {
				let that=this
				let url = "/api/his/dictionary?query_key=R003";
				this.$axios.get(url).then(res => {
						this.cardTypeList = res.range_list
						if(this.cardTypeList.length>0){
							that.cardTypeList.forEach((item,index) => {
							   if(item.name=='居民身份证'){
								  that.cardTypeName='居民身份证' 
								  that.form.id_type = item.code
							   }
							})
						}
					})
					.catch(err => {
						console.log("err", err);
					});
			},
			//名族
			getFamilial() {
				let url = "/api/his/dictionary?query_key=R007";
				this.$axios.get(url).then(res => {
						this.FamilialList = res.range_list
					})
					.catch(err => {
						console.log("err", err);
					});
			},
			getSex() {
				let url = "/api/his/dictionary?query_key=R001";
				this.$axios.get(url).then(res => {
						this.sexList = res.range_list
					})
					.catch(err => {
						console.log("err", err);
					});
			},
			change(e) {
				console.log(e)
				this.is_self=e
			},
			toPageLink(url) {
				this.$router.push({
					path: url,
					query: {},
				})
			}
		}
	};
</script>

<style lang="less" scoped>
	.alterPou {
		background-color: rgba(0, 0, 0, 0.39) !important;
	}
	.content {
		min-height: 100vh;
		background-color: #f0f8f8;
		// background-image: url("/src/assets/img/index/bg.png");
		// background-size: 100% 100%;
		width: 100%;
		padding-bottom: 40px;
		.addBtn {
			width: 340px;
			height: 44px;
			background: linear-gradient(90deg, #5CD2A3 0%, #3EC6D9 100%);
			border-radius: 22px;
			font-size: 15px;
			font-family: PingFang;
			font-weight: 500;
			color: #FFFFFF;
			margin: 40px auto;
		}

		.alterTips {
			padding: 20px 15px 20px 16px;
			width: 260px;
			background: #FFFFFF;

			&-t {
				font-size: 15px;
				font-family: MiSans;
				font-weight: 500;
				color: #000000;
				text-align: center;
				margin-bottom: 17px;
			}

			&-info {
				width: 100%;
				font-size: 13px;
				font-family: MiSans;
				font-weight: 400;
				color: #595959;
				line-height: 19px;
			}

			&-btn {
				width: 196px;
				height: 30px;
				background: linear-gradient(90deg, #5CD2A3 0%, #3EC6D9 100%);
				border-radius: 10px;
				font-size: 12px;
				font-family: MiSans;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
				line-height: 30px;
				margin: 15px auto 0 auto;
			}
		}

		/deep/.van-field__label {
			width: 117px;
			color: #000000 !important;
		}

		/deep/.van-popup--center.van-popup--round {
			border-radius: 10px;
		}

		.info {
			margin: 4px auto;
			width: 346px;
			min-height: 449px;
			background: #FFFFFF;
			border-radius: 5px;

			&-code {
				color: #1977FD;
			}
		}

		.tips {
			width: 375px;
			height: 30px;
			background: #FAF5DA;
			font-size: 11px;
			font-family: MiSans;
			font-weight: 400;
			color: #EE8009;
			display: flex;
			align-items: center;

			img {
				width: 9px;
				margin: 0 6px 0 15px;
			}
		}
	}
</style>